<template>
<!-- 1.3把导航栏的信息渲染进去 -->

  <div class="my-tab-bar">
    <!-- 1.4设置点击事件，点击高亮 -->
    <!-- 设置一个动态class,当点击下标时，就会变成蓝色 ，点击的下标是列表的下标就为true-->
    <!-- 2.3 点击事件，子传父，当点击底部模块的时候，（组件的名字在arr数组的对象中）将点击的这个组件名字传给父组件，点击事件的事件处理函数中需要传入对象作为参数-->
  	<div class="tab-item" 
    v-for="(item,index) in barList" 
    :key="index"
    @click="activeBtn(index,item.componentName)"
    :class="{current:active===index}"
    >
      <!-- 1.3图标 渲染图标进去，给一个动态class-->
      <span class="iconfont"
      :class="item.iconText"
      ></span>
      <!-- 1.3文字 -->
      <span>{{item.text}}</span>
    </div>
  </div>
</template>

<script>
export default {
  // created(){
  //   console.log(this.barList);
    
  // },
  //1.2props接收barList
  props:{
    barList:{
      type:Array,//类型是数组
      required:true,//required必须要写，不写返回false
      //导航栏的长度3-5之间
      validato(val){
        if(val.length <2 || val.length >5){
          console.err(val.length >2 || val.length <5);
          return false
        }
        return true
      },
    },
  },
  data () {
    return {
      active:0
    }
  },
  //1.4点击高亮
  methods:{
    //1.4
    activeBtn(index,obj){
      // console.log(index);
      //判断是否点击
      //赋值
      // console.log(componentName);
       this.active =index
       //2.4,子传父
       this.$emit('tabPage',obj)
    }
  }
}
</script>

<style lang="less" scoped>
.my-tab-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  border-top: 1px solid #ccc;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: white;
  .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
    
.current {
  color: #1d7bff;
}
</style>